<template>
  <Header></Header>

  <!-- 文章详情 -->
  <div class="container mx-auto max-w-screen-xl mt-5 mb-3 font-mi">
    <div class="grid grid-cols-4">
      <!-- 左边栏 -->
      <div class="col-span-4 px-3 mb-3 md:col-span-3 sm:col-span-4">
        <div class="bg-white border border-gray-200 p-5 rounded-lg dark:bg-gray-800 dark:border-gray-700">
          <!-- 面包屑 -->
          <nav class="flex mb-4" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
              <li class="inline-flex items-center">
                <a @click="router.push('/')"
                  class="cursor-pointer inline-flex items-center text-sm font-medium text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                  <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                    viewBox="0 0 20 20">
                    <path
                      d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
                  </svg>
                  首页
                </a>
              </li>
              <li aria-current="page">
                <div class="flex items-center text-gray-400">
                  /
                  <span class="ml-1 text-sm font-medium text-gray-500 md:ml-4 dark:text-gray-400">正文</span>
                </div>
              </li>
            </ol>
          </nav>


          <!-- 文章主体 -->
          <article>
            <h1 class="title mt-2 text-xl sm:text-2xl md:text-3xl lg:text-4xl dark:text-gray-300">{{ article.title }}
            </h1>
            <div class="text-gray-400 text-sm flex items-center article-mata custom-meta">
              <svg class="inline w-3 h-3 mr-2 text-gray-400 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
              </svg>
              发表于 {{ article.updateTime }}

              <svg class="inline w-3 h-3 ml-5 mr-2 text-gray-400 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                fill="none" viewBox="0 0 18 18">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H1Z" />
              </svg>
              分类于&nbsp;<a @click="goCatagoryArticleListPage(article.categoryId, article.categoryName)"
                class="text-gray-500 hover:underline">{{ article.categoryName }}</a>

              <svg class="inline w-3 h-3 ml-5 mr-2 text-gray-400 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                fill="none" viewBox="0 0 20 14">
                <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                  <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
                  <path d="M10 13c4.97 0 9-2.686 9-6s-4.03-6-9-6-9 2.686-9 6 4.03 6 9 6Z" />
                </g>
              </svg> 阅读量 {{ article.readNum }}
            </div>
            <div :class="{ 'dark': isDark }">
              <div ref="articleContentRef" class="article-content dark:text-gray-300" v-viewer v-html="article.content"
                v-highlight>
              </div>
            </div>


            <!-- 标签 -->
            <div class="mt-5 mb-5 dark:border-gray-700">
              <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags" :key="index"
                style="font-size: 0.78rem"
                class="inline-block rounded-full cursor-pointer bg-green-100 text-green-800 text-xs font-medium mr-3 mb-2 px-2.5 py-0.5 rounded dark:bg-green-500 dark:text-green-100 hover:bg-green-200 hover:text-green-900">
                # {{ item.name }}
              </div>
            </div>
          </article>
          <!-- 上下篇 -->
          <div class="article-footer flex dark:border-gray-800">
            <div v-show="article.preArticleId"
              class="cursor-pointer basis-1/2 flex flex-col h-full p-4 mr-3 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-sky-500 hover:bg-gray-20 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
              <a @click="goArticleDetail(article.preArticleId)">
                <span class="desc">
                  <svg class="inline w-2 h-2 mr-1 mb-3px text-gray-500 dark:text-white" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M7 1 1.3 6.326a.91.91 0 0 0 0 1.348L7 13" />
                  </svg>
                  上一篇</span>
                <span class="text-xs sm:text-xs md:text-xs lg:text-sm">{{
                  article.preArticleTitle }}</span>
              </a>
            </div>
            <div v-show="article.nextArticleId"
              class="cursor-pointer basis-1/2 flex flex-col h-full text-right p-4 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-sky-500 hover:bg-gray-20 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
              <a @click="goArticleDetail(article.nextArticleId)">
                <span class="desc">
                  下一篇
                  <svg class="inline w-2 h-2 ml-1 mb-3px text-gray-500 dark:text-white" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1" />
                  </svg>
                </span>
                <span class="text-xs sm:text-xs md:text-xs lg:text-sm ">{{
                  article.nextArticleTitle }}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边栏 -->
      <div class="col-span-4 px-3 md:col-span-1 sm:col-span-4">
        <div>
          <UserInfoCard></UserInfoCard>

          <!-- 文章分类 -->
          <div
            class="mb-3 shadow-md w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
            <!-- 分类标题 -->
            <div class="flex mb-3 justify-between">
              <h2 class="mb-1 pt-1.5 font-mi font-bold text-gray-900 uppercase dark:text-white">
                <svg t="1698998570037" class="inline icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="21572" width="200" height="200">
                  <path
                    d="M938.666667 464.592593h-853.333334v-265.481482c0-62.577778 51.2-113.777778 113.777778-113.777778h128.948148c15.17037 0 28.444444 3.792593 41.718519 11.377778l98.607407 64.474074h356.503704c62.577778 0 113.777778 51.2 113.777778 113.777778v189.62963z"
                    fill="#3A69DD" p-id="21573"></path>
                  <path
                    d="M805.925926 398.222222h-587.851852v-125.155555c0-24.651852 20.859259-45.511111 45.511111-45.511111h496.82963c24.651852 0 45.511111 20.859259 45.511111 45.511111V398.222222z"
                    fill="#D9E3FF" p-id="21574"></path>
                  <path
                    d="M843.851852 417.185185h-663.703704v-98.607407c0-28.444444 22.755556-53.096296 53.096296-53.096297h559.407408c28.444444 0 53.096296 22.755556 53.096296 53.096297V417.185185z"
                    fill="#FFFFFF" p-id="21575"></path>
                  <path
                    d="M786.962963 938.666667h-549.925926c-83.437037 0-151.703704-68.266667-151.703704-151.703704V341.333333s316.681481 37.925926 430.45926 37.925926c189.62963 0 422.874074-37.925926 422.874074-37.925926v445.62963c0 83.437037-68.266667 151.703704-151.703704 151.703704z"
                    fill="#5F7CF9" p-id="21576"></path>
                  <path
                    d="M559.407407 512h-75.851851c-20.859259 0-37.925926-17.066667-37.925926-37.925926s17.066667-37.925926 37.925926-37.925926h75.851851c20.859259 0 37.925926 17.066667 37.925926 37.925926s-17.066667 37.925926-37.925926 37.925926z"
                    fill="#F9D523" p-id="21577"></path>
                </svg>分类
              </h2>
              <!-- 查看更多 -->
              <a @click="router.push('/category/list')" class=" bg-gray-100 flex items-center px-3 py-1 text-xs font-medium text-center 
            text-gray-900  rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 
            dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:border-gray-700
             dark:focus:ring-gray-700">
                <svg class="w-[7px] h-[7px] text-gray-400 dark:text-white" aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 14">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1" />
                </svg>
              </a>
            </div>
            <!-- <div
              class="text-sm font-mi font-medium text-gray-900 bg-white rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <a @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories" :key="index"
                class="flex items-end block w-full px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                <svg t="1731375404658" class="icon w-4 h-4 mr-2 mb-2px text-gray-800 inline dark:text-white"
                  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17301" width="48"
                  height="48">
                  <path
                    d="M813.2096 901.5808H218.3168c-68.3008 0-123.6992-55.3984-123.6992-123.6992V648.704h842.24v129.1264c0 68.352-55.3472 123.7504-123.648 123.7504z"
                    fill="#ffa115" p-id="17302"></path>
                  <path
                    d="M857.1904 286.1568v-3.7888c0-75.8272-61.6448-137.472-137.472-137.472H472.832c-0.6144 0-1.1776 0.0512-1.792 0.1024-25.5488-27.136-61.3888-43.008-99.9424-43.008H201.3696c-75.8272 0-137.472 61.6448-137.472 137.472v555.3664c0 75.8272 61.6448 137.472 137.472 137.472h628.736c75.8272 0 137.472-61.6448 137.472-137.472V420.9152c0-66.5088-47.5136-122.1632-110.3872-134.7584z m-61.44-3.7888v1.0752h-200.7552c-28.5184 0-54.3744-15.7184-67.5328-41.0624l-18.688-36.0448h210.944c41.9328 0 76.032 34.0992 76.032 76.032z m110.3872 512.4096c0 41.9328-34.0992 76.032-76.032 76.032H201.3696c-41.9328 0-76.032-34.0992-76.032-76.032V239.4624c0-41.9328 34.0992-76.032 76.032-76.032h169.728c28.5184 0 54.3744 15.7184 67.5328 41.0624l34.304 66.2016a137.02144 137.02144 0 0 0 122.0608 74.24h235.1104c41.9328 0 76.032 34.0992 76.032 76.032v373.8112z"
                    fill="#474A54" p-id="17303"></path>
                </svg>
                {{ item.name }}
              </a>
            </div> -->
            <!-- 新版分类列表 -->
            <div
              class="text-sm flex flex-wrap gap-3 pt-2 font-medium text-gray-600 rounded-lg dark:border-gray-600 dark:text-white">
              <a @click="goCatagoryArticleListPage(category.id, category.name)" v-for="(category, index) in categories"
                :key="index"
                class="cursor-pointer inline-flex items-center px-4 py-2 text-sm font-medium text-center border rounded-lg 
            hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-300 
            dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 dark:hover:text-white">
                {{ category.name }}
                <span
                  class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-sky-800 bg-sky-200 rounded-full">
                  {{ category.articlesTotal }}
                </span>
              </a>
            </div>

          </div>

          <!-- 文章标签 -->
          <div
            class="mb-3 shadow-md w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
            <!-- 标签标题 -->
            <div class="flex mb-3 justify-between">
              <h2 class="mb-1 pt-1.2 font-mi font-bold text-gray-900 uppercase dark:text-white">
                <svg t="1698980289658" class="inline icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="13858" width="200" height="200">
                  <path
                    d="M646.4512 627.5584m-298.1888 0a298.1888 298.1888 0 1 0 596.3776 0 298.1888 298.1888 0 1 0-596.3776 0Z"
                    fill="#C7ACEF" p-id="13859"></path>
                  <path
                    d="M467.6096 962.5088c-34.4064 0-68.7616-13.1072-94.976-39.2704l-276.48-276.48c-52.3776-52.3776-52.3776-137.5744 0-189.9008L465.4592 87.552a105.216 105.216 0 0 1 76.8512-30.6176l308.6336 8.3456c55.3472 1.4848 100.096 46.0288 101.7856 101.376l9.5744 310.1696c0.8704 28.7744-10.2912 56.9344-30.6176 77.2608l-369.2032 369.2032c-26.112 26.112-60.4672 39.2192-94.8736 39.2192z m71.8848-844.1856c-11.4176 0-22.4768 4.5568-30.5664 12.6464L139.6224 500.2752c-28.416 28.416-28.416 74.6496 0 103.0144l276.48 276.48c28.416 28.416 74.6496 28.416 103.0144 0l369.2032-369.2032a43.4176 43.4176 0 0 0 12.6464-31.8976l-9.5744-310.1696c-0.7168-22.8864-19.2-41.2672-42.0352-41.8816l-308.6336-8.3456c-0.4608 0.0512-0.8192 0.0512-1.2288 0.0512z"
                    fill="#4F4F4F" p-id="13860"></path>
                  <path
                    d="M676.4032 445.5424c-62.208 0-112.8448-50.6368-112.8448-112.8448s50.6368-112.8448 112.8448-112.8448c62.208 0 112.8448 50.6368 112.8448 112.8448s-50.6368 112.8448-112.8448 112.8448z m0-164.1984c-28.3648 0-51.4048 23.04-51.4048 51.4048s23.04 51.4048 51.4048 51.4048c28.3648 0 51.4048-23.04 51.4048-51.4048s-23.0912-51.4048-51.4048-51.4048z"
                    fill="#4F4F4F" p-id="13861"></path>
                </svg>标签
              </h2>
              <!-- 查看更多 -->
              <a @click="router.push('/tag')" class=" bg-gray-100 flex items-center px-3 py-1 text-xs font-medium text-center 
            text-gray-900  rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 
            dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:border-gray-700
             dark:focus:ring-gray-700">
                <svg class="w-[7px] h-[7px] text-gray-400 dark:text-white" aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 14">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1" />
                </svg>
              </a>
            </div>
            <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in tags" :key="index"
              style="font-size: 0.78rem"
              class="inline-block cursor-pointer font-mi bg-purple-100 text-purple-800 text-xs md:text-xs font-medium mr-1 mb-1 px-2.5 py-0.5 rounded hover:bg-purple-200 hover:text-purple-900 dark:hover:bg-gray-500 dark:hover:text-white  dark:text-white dark:bg-gray-700">

              {{ item.name }}
            </div>
          </div>

        </div>
        <!-- 文章目录 -->
        <Toc></Toc>
      </div>
    </div>
  </div>
  <!-- 返回顶部 -->
  <ScrollToTopButton></ScrollToTopButton>
  <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import UserInfoCard from '@/components/UserInfoCard.vue'
import { useRoute, useRouter } from 'vue-router';
import { getArticleDetail } from '@/api/frontend/article';
import { ref, reactive, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { getCategories } from '@/api/frontend/category'
import { getTags } from '@/api/frontend/tag'
import ScrollToTopButton from '@/layouts/components/ScrollToTopButton.vue'
import Toc from '@/layouts/components/Toc.vue'
import hljs from 'highlight.js';
import 'highlight.js/styles/tokyo-night-dark.css'
import { useDark } from '@vueuse/core'
import { initTooltips } from 'flowbite'

// 是否是暗黑模式
const isDark = useDark()

onMounted(() => {
  initTooltips();
})

const router = useRouter()
const route = useRoute()
const article = reactive({
  title: '',
  content: '',
  updateTime: '',
  readNum: 0,
  categoryId: null,
  categoryName: '',
  preArticleId: null,
  preArticleTitle: '',
  nextArticleId: null,
  nextArticleTitle: '',
  tags: [],
})

function queryArticleDetail(articleId) {
  console.log('调用获取详情接口...' + route.query.articleId)
  getArticleDetail(articleId).then((e) => {
    article.title = e.data.title
    article.content = e.data.content
    article.updateTime = e.data.updateTime
    article.categoryId = e.data.categoryId
    article.categoryName = e.data.categoryName
    article.readNum = e.data.readNum
    article.tags = e.data.tags
    if (e.data.preArticle) {
      console.log('上一篇...')
      console.log(e.data.preArticle)
      article.preArticleId = e.data.preArticle.id
      article.preArticleTitle = e.data.preArticle.title
    } else {
      article.preArticleId = null
    }

    if (e.data.nextArticle) {
      article.nextArticleId = e.data.nextArticle.id
      article.nextArticleTitle = e.data.nextArticle.title
    } else {
      article.nextArticleId = null
    }

    nextTick(() => {
      // 获取所有 pre code 节点
      let highlight = document.querySelectorAll('pre code')
      // 循环高亮
      highlight.forEach((block) => {
        hljs.highlightElement(block)
      })

      // 获取所有的 pre 节点
      let preElements = document.querySelectorAll('pre')
      preElements.forEach(preElement => {
        // 找到第一个 code 元素
        let firstCode = preElement.querySelector('code');
        if (firstCode) {
          let copyCodeBtn = '<button class="hidden copy-code-btn flex items-center justify-center"><div class="copy-icon"><svg t="1731564670460" class="icon w-7 h-7" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5432" width="48" height="48"><path d="M657 223H287c-22.1 0-40 17.9-40 40v418c0 22.1 17.9 40 40 40h370c22.1 0 40-17.9 40-40V263c0-22.1-17.9-40-40-40z m10 448c0 11-9 20-20 20H297c-11 0-20-9-20-20V273c0-11 9-20 20-20h350c11 0 20 9 20 20v398z" fill="#cdcdcd" p-id="5433"></path><path d="M747 353.8V751c0 11-9 20-20 20H387.8c-6.5 0-12.2 4.1-14.2 10.3-3.2 9.7 4 19.7 14.2 19.7H737c22.1 0 40-17.9 40-40V353.8c0-10.2-10-17.5-19.7-14.2-6.2 2-10.3 7.8-10.3 14.2zM582 384H362c-8.3 0-15-6.7-15-15s6.7-15 15-15h220c8.3 0 15 6.7 15 15s-6.7 15-15 15zM582 482H362c-8.3 0-15-6.7-15-15s6.7-15 15-15h220c8.3 0 15 6.7 15 15s-6.7 15-15 15zM527.7 580H362c-8.3 0-15-6.7-15-15s6.7-15 15-15h165.7c8.3 0 15 6.7 15 15s-6.8 15-15 15z" fill="#cdcdcd" p-id="5434"></path></svg></div></button>'
          firstCode.insertAdjacentHTML('beforebegin', copyCodeBtn);

          // 获取刚插入的按钮
          let copyBtn = firstCode.previousSibling;
          copyBtn.addEventListener('click', () => {
            // 添加 copied 样式
            copyBtn.classList.add('copied');
            copyToClipboard(preElement.textContent)
            // 1.5 秒后移除 copied 样式
            setTimeout(() => {
              copyBtn.classList.remove('copied');
            }, 1500);
          });
        }

        // 添加事件监听器
        preElement.addEventListener('mouseenter', handleMouseEnter);
        preElement.addEventListener('mouseleave', handleMouseLeave);
      })
    })

  })
}
queryArticleDetail(route.query.articleId);

const goArticleDetail = (articleId) => {
  console.log('跳转详情页' + articleId)
  router.push({ path: '/article/detail', query: { articleId: articleId } })
  queryArticleDetail(articleId)

  // 添加滚动到顶部的逻辑
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动
  })
}


// 获取分类
const categories = ref([])
getCategories().then((e) => {
  console.log('获取分类数据')
  console.log(e)
  categories.value = e.data
})


// 获取标签
const tags = ref([])
getTags().then((e) => {
  console.log('获取标签数据')
  console.log(e)
  tags.value = e.data
})

const goCatagoryArticleListPage = (id, name) => {
  router.push({ path: '/category/article/list', query: { id: id, name: name } })
}

const goTagArticleListPage = (id, name) => {
  router.push({ path: '/tag/article/list', query: { id: id, name: name } })
}

// 复制内容到剪切板
function copyToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

const handleMouseEnter = (event) => {
  // 鼠标移入，显示按钮
  let copyBtn = event.target.querySelector('button');
  if (copyBtn) {
    copyBtn.classList.remove('hidden');
    copyBtn.classList.add('block');
  }
}

const handleMouseLeave = (event) => {
  // 鼠标移出，隐藏按钮
  let copyBtn = event.target.querySelector('button');
  if (copyBtn) {
    copyBtn.classList.add('hidden');
  }
}

</script>

<style scoped>
html {
  scroll-behavior: smooth;
}

.title {
  padding-bottom: 20px;
  margin-bottom: 0;
  line-height: 1.3;
  word-wrap: break-word;
  font-size: 30px;
  font-weight: 700;
  /* color: #292525; */
}

@media (max-width: 640px) {
  .title {
    font-size: 24px;
    /* 或者你想要的移动端字体大小 */
    padding-bottom: 0px;
  }
}

.article-mata {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .custom-meta {
    display: none !important;
  }
}

:deep(pre) {
  background: #1f1f1f;
  color: #f8f8f2;
  border-radius: 5px;
  padding: 10px 0 0;
  font-size: 14px;
  padding-left: 15px;
  position: relative;
  /* 添加相对定位 */
}

:deep(pre code.hljs) {
  display: block;
  overflow-x: auto;
  padding: 1em;
  padding-left: 0 !important;
  padding-top: 25px !important;
}

:deep(pre)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  /* 头部的高度 */
  background: #3b3b3b !important;
  /* 头部的背景色 */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

:deep(pre)::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 15px;
  width: 10px;
  height: 10px;
  background: #fc625d;
  border-radius: 50%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
}

:deep(.article-content p) {
  letter-spacing: 0.3px;
  margin: 0 0 20px 0;
  line-height: 30px;
  color: #4c4e4d;
  font-weight: 400;
  word-break: normal;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial, sans-serif;
}

:deep(.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6) {
  margin: 30px 0 10px 0;
  color: #292525;
  line-height: 150%;
  font-family: PingFang SC, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
}

:deep(.article-content h3) {
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 16px;
  font-weight: 600;
}

:deep(.image-caption) {
  min-width: 20%;
  max-width: 80%;
  min-height: 43px;
  display: block;
  padding: 10px;
  margin: 0 auto;
  /* border-bottom: 1px solid #eee; */
  font-size: 13px;
  color: #999;
  text-align: center;
}

:deep(code:not(pre code)) {
  padding: 2px 4px;
  margin: 0 2px;
  font-size: 95% !important;
  border-radius: 4px;
  color: rgb(41, 128, 185);
  background-color: rgba(27, 31, 35, 0.05);
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

:deep(pre code) {
  display: block;
  font-size: 95% !important;
  background-color: rgba(27, 31, 35, 0.05);
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
  /* color: #fff; */
}

:deep(article ul) {
  padding-left: 40px;
}

:deep(article ul li) {
  list-style-type: disc;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
}



:deep(blockquote) {
  /* margin: 20px 0; */
  border-left: 2.3px solid rgb(52, 152, 219);
  quotes: none;
  background: rgb(236, 240, 241);
  color: #777;
  font-size: 16px;
  /* padding: 10px 15px 10px 15px; */
  margin: 2em 0;
  padding: 24px 24px;
  position: relative;
}

:deep(blockquote p:last-child) {
  margin-bottom: 0;
}

:deep(table tr) {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

:deep(table) {
  border-collapse: collapse;
  margin-bottom: 1rem;
}

:deep(table th) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

:deep(table td) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

:deep(.article-content a) {
  color: #167bc2;
}

:deep(.article-content h2) {
  /* margin: 1em auto; */
  font-size: 22px;
  line-height: 1.5;
  font-weight: bold;
  font-synthesis: style;
  /* border-bottom: 1px solid rgba(0,0,0,.1); */
  padding-bottom: 16px;
  /* border-left: 3px solid #167bc2; */
  padding-bottom: 0;
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 26px;
  line-height: 140%;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 15px;
}

:deep(.article-content svg) {
  display: inline;
}

:deep(.article-content img) {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

:deep(strong) {
  color: rgb(52, 152, 219);
}

:deep(table tr:nth-child(2n)) {
  background-color: #f6f8fa;
}

:deep(.copy-code-btn) {
  background-color: #494949;
  border-width: 0;
  cursor: pointer;
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 5;
  width: 2.0rem;
  height: 2.0rem;
  padding: 0;
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity .4s;
  opacity: 1
}

:deep(.copy-code-btn:hover) {
  background: #494949;
}

:deep(.copy-icon) {
  --copy-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
  background: currentcolor;
  -webkit-mask-image: var(--copy-icon);
  mask-image: var(--copy-icon);
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 1em;
  mask-size: 0.5em;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.825rem;
  color: #9e9e9e;
  font-size: 1.25rem;
}

:deep(.copied) {
  display: flex;
  background: #494949;
}

:deep(.copied:after) {
  content: "已复制";
  position: absolute;
  top: 0;
  right: calc(100% + .25rem);
  display: block;
  height: 1.8rem;
  padding: .625rem;
  border-radius: .5rem;
  background: #494949;
  color: #9e9e9e;
  font-weight: 500;
  line-height: 0.75rem;
  white-space: nowrap;
  font-size: 12px;
  font-family: 'Miss Font', sans-serif;
}

:deep(.copied .copy-icon) {
  --copied-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--copied-icon);
  mask-image: var(--copied-icon);
}

/* 定制黑暗主题样式 */
/* h1, h2, h3, h4, h5, h6 标题样式 */
:deep(.dark .article-content h2) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity));
  border-bottom: 1px solid;
  border-color: rgb(55 65 81 / 1);
}

:deep(.dark .article-content h3) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity));
}

:deep(.dark .article-content h4) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity));
}

:deep(.dark .article-content h5) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity));
}

:deep(.dark .article-content h6) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity));
}

/* p 段落样式 */
:deep(.dark .article-content p) {
  color: #9e9e9e;
}

/* blockquote 引用样式 */
:deep(.dark .article-content blockquote) {
  quotes: none;
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
  border-left: 2.3px solid #555;
  color: #666;
  font-size: 15px;
  margin-bottom: 20px;
  padding: 0.25rem 0 0.25rem 1rem;
}

/* ul 样式 */
:deep(.dark .article-content ul) {
  padding-left: 2rem;
  color: #9e9e9e;
}

/* ol 样式 */
:deep(.dark .article-content ol) {
  color: #9e9e9e;
}

/* code 样式 */
:deep(.dark .article-content code:not(pre code)) {
  padding: 2px 4px;
  margin: 0 2px;
  font-size: .85em;
  border-radius: 5px;
  color: #abb2bf;
  background: #333;
  /* background-color: rgba(27, 31, 35, 0.05); */
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/* 表格样式 */
:deep(.dark table tr) {
  background-color: rgb(31 41 55 / 1);
}

:deep(.dark table) {
  color: #9e9e9e;
}

:deep(.dark table th) {
  border: 1px solid #394048;
}

:deep(.dark table td) {
  border: 1px solid #394048;
}

:deep(.dark table tr:nth-child(2n)) {
  background-color: rgb(21 41 55 / 1);
}

/* hr 横线 */
:deep(.dark hr) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
}

.el-breadcrumb__inner a {
  font-weight: 400;
  color: #606266;
}

.el-breadcrumb__inner a:hover {
  font-weight: 400;
  color: #606266;
  text-decoration: underline;
}

.article-footer {
  /* border-top: 1px solid #e4e7ed; */
  background-color: var(--el-fill-color-blank);
  justify-content: space-between;
  padding-top: 1rem;
}

.desc {
  display: block;
  font-size: 12px;
  /* color: rgba(60, 60, 60, .7); */
  ;
}

.cursor-pointer {
  cursor: pointer;
}

.category-item:hover {
  text-decoration: underline;
  cursor: pointer;
}

.tag-item:hover {
  cursor: pointer;
}

.el-tag:hover {
  background-color: var(--el-color-info-light-8);
}
</style>